import _ from 'lodash';
import { parse } from '@babel/parser';
import { message } from 'antd';
import {
  projectService
} from "@/services"
import {
  findNodeById
} from '@/utils';
export default {
  namespace: 'project',
  state: {
    currentPropName: 'children',
    mode: 'design', // design 设计模式 | code 代码模式
    project: 'project',
    pageConfig: [], // 组件树状数据
    pages: [],
    currentPage: '',
    isShowSelectCompPanel: false,
    isShowPropsPanel: false,
    componentList: [], // 选择组件面板的组件数据源
    currentCompId: '',
    codes: {},
    ast: {}
  },
  reducers: {
    showSelectCompPanel(state) {
      return {
        ...state,
        isShowSelectCompPanel: true
      }
    },
    hideSelectCompPanel(state) {
      return {
        ...state,
        isShowSelectCompPanel: false
      }
    },
    saveNodeChange(state, {
      payload
    }) {
      const components = _.cloneDeep(state.pageConfig);
      const node = findNodeById(components, payload.id);
      if (node) {
        node.style = Object.assign(node.style || {}, payload.style);
        node.props = Object.assign(node.props || {}, payload.props);
      }
      return {
        ...state,
        pageConfig: components,
      };
    },
    setSelectedNode(state, {
      payload
    }) {
      return {
        ...state,
        currentCompId: payload,
        isShowPropsPanel: true
      }
    },
    save(state, {
      payload
    }) {
      return {
        ...state,
        ...payload
      }
    },
    saveCode(state, { payload }) {
      const { currentPage } = state;
      const codes = _.cloneDeep(state.codes);
      const pageName = currentPage.split('.')[0];
      codes[pageName] = payload.code;
      var ast = parse(payload.code, {
        sourceType: 'module',
        ranges: false,
        plugins: ['typescript', 'decorators-legacy']
      });
      console.log('获取ast', ast);
      return {
        ...state,
        codes,
        ast
      }
    }
  },
  effects: {
    * getPageConfigs({
      payload
    }, {
      put,
      call
    }) {
      const result = yield call(projectService.getPageConfigs, payload);
      yield put({
        type: 'save',
        payload: {
          pageConfig: result.data
        }
      });
    },

    * getPageCode({ payload }, { put, call }) {
      const result = yield call(projectService.getPageCode, payload);
      yield put({
        type: 'saveCode',
        payload: {
          code: result.data
        }
      });
    },

    * getPages({
      payload
    }, {
      put
    }) {
      const result = yield projectService.getPages(payload.project);
      yield put({
        type: 'save',
        payload: {
          pages: result.data
        }
      });
    },

    * asyncPageConfig({
      payload
    }) {
      const {
        pageConfig,
        project,
        currentPage,
      } = payload;
      const result = yield projectService.asyncPageConfig({
        pageConfig,
        project,
        page: currentPage
      });

      console.log(result);
    },

    * getComponentsList({
      payload
    }, {
      put
    }) {
      const result = yield projectService.getComponentsList();
      yield put({
        type: 'save',
        payload: {
          componentList: result
        }
      });
    },

    * asyncPageCode({ payload }, { put }) {
      projectService.asyncPageCode(payload);
      message.success('保存成功');
      yield put({
        type: 'saveCode',
        payload: {
          code: payload.code
        }
      });
    }
  }
}
